<template>
  <div class="page-wrap">
    <BeforeLogin v-show="!chatStore.isConnect" @start="popupShow = true" />

    <InputPopup v-model:show="popupShow" />

    <ChatBox v-show="chatStore.isConnect"></ChatBox>
  </div>
</template>

<script setup>
  import BeforeLogin from './components/BeforeLogin.vue'
  import InputPopup from './components/InputPopup.vue'
  import ChatBox from './components/ChatBox/index.vue'

  import { useChatStore } from '@/store/chat'

  const chatStore = useChatStore()

  const popupShow = ref(false)
</script>

<style lang="less" scoped>
  .page-wrap {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    overflow-y: auto;
  }
</style>
